<script setup>
import { Refresh, Down } from '@icon-park/vue-next'

const router = useRouter()
const route = useRoute()

const status = reactive({
    loadTip: '加载中...',//列表加载时的提示
})
const data = reactive({
    list: [],//列表数据
})

onMounted(() => {
    getList()
})

//获取数据
const getList = () => {
    status.loadTip = '加载中...'
    //开始请求
    axios.get('/adminGroup/list').then(response => {
        data.list = response.data.list
        status.loadTip = response.data.total.length > 0 ? '加载完成' : '未查询到数据'
    }).catch(error => {
        status.loadTip = '服务器返回出错'
    })
}
//按照id删除
const deleteItems = (ids) => {
    if (typeof ids != 'object') ids = [ids]//后台需要接收格式为:[2,3,4]
    axios.post('/adminGroup/delete', {
        ids: ids
    }).then(response => {
        sys.tip(response, () => { getList() })
    })
}
//导出数据
const exportList = () => {
    sys.download('/adminGroup/listExport', {
        name: '管理员列表.xlsx',
    })
}
</script>

<template>
    <div>
        <Breadcrumb :title="['管理员', '管理组']" :path="['/admin/list']" :back="route.query.back" />
        <el-card class="list">
            <template #header>
                <div class="flex-2">
                    <el-space>
                        <el-text size="large">管理组列表</el-text>
                        <el-tooltip effect="dark" content="刷新数据" placement="right">
                            <el-link :underline="false" @click="getList()">
                                <Refresh />
                            </el-link>
                        </el-tooltip>
                    </el-space>
                    <el-space class="last-child-mr0">
                        <el-button type="primary" plain
                            @click="router.push('/adminGroup/edit?back=' + encodeURIComponent(route.fullPath))"
                            v-if="$power('/adminGroup/edit')">添加</el-button>
                        <el-dropdown trigger="click" v-if="$power('/adminGroup/listExport')">
                            <el-button type="primary" plain>
                                <span>更多操作</span>
                                <Down />
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-if="$power('/adminGroup/listExport')"
                                        @click="exportList()">按查询条件导出数据</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-space>
                </div>
            </template>
            <el-table class="nopage" :empty-text="status.loadTip" :data="data.list">
                <el-table-column prop="id" label="Id" width="80" />
                <el-table-column prop="name" label="管理组名称" width="500" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-link class="mr10" type="primary"
                            @click="router.push('/adminGroup/edit?id=' + scope.row.id + '&back=' + encodeURIComponent(route.fullPath))">
                            <span v-if="$power('/adminGroup/info') && $power('/adminGroup/edit')">修改</span>
                            <span v-else-if="$power('/adminGroup/info')">详情</span>
                        </el-link>
                        <el-popconfirm :hide-after="0" width="200" :title="'确定要删除【' + scope.row.name + '】吗?'"
                            @confirm="deleteItems(scope.row.id)" v-if="$power('/adminGroup/delete')">
                            <template #reference>
                                <el-link type="danger">删除</el-link>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="" />
            </el-table>
        </el-card>
    </div>
</template>

<style scoped lang="scss"></style>
